<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		 <div id="app">
			 <!-- z指令：v-for 展现的的标签-->
			<!-- 案例1：以循环方式输出爱好 -->
			<div id="demo1">
				<!-- 如果只有一个数据，则value表示数据 -->
				<p v-for="value in hobby" v-text="value"></p>
			</div>
			<hr>
			<!-- 案例2：以循环方式输出爱好 展现下标 -->
			<div id="demo2">
				<p v-for="value,index in hobby">
					<span v-text="index+1"></span>
					----
					<span v-text="value"></span>
				</p>				
			</div>
			<!-- 案例3： -->
			<div id="demo3">
				<table border="1px" width="90%">
					<tr align="center">
						<td>编号</td>
						<td>名称</td>
						<td>年龄</td>
					</tr>
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
					</tr>
				</table>
			</div>
		 </div>
		 <script src="../js/vue.js"></script>
		 <script>
			 const app = new Vue({
				 el: "#app",
				 data: {
					 hobby: ["敲代码","改bug","钻研技术"],
					 userList: [{id:100,name:"泰森",age:60},
								{id:101,name:"嘴炮",age:40},
								{id:102,name:"泰坦巨猿",age:300000}]
				 },
				 methods: {
				}
			 });
		 </script>
	</body>
</html>
